<!-- 活跃度排名 -->
<template>
    <div class="liveness">
        <div class="liveness-item" v-for="(item,index) in data" :key="index">
            <span class="liveness-index">{{ index+1 }}</span>
            <span class="liveness-name">{{ item.province }}</span>
            <span class="liveness-num">{{ item.accumulateAccessNum }}</span>
        </div>
    </div>
</template>
<script setup>
const props = defineProps({
    data: {
        required: true,
        type: Array,
        default: []
    }
})
const list = [];
for (let i = 0; i < 5; i++) {
    list.push({
        name: '北京',
        num: Number(i) + 1,
    });
}
</script>
<style scoped lang="scss">
    .liveness{
        color: #fff;
        display: flex;
        justify-content: space-around;
        width: 400px;
        margin: 15px auto 0;
        &-item{
            width: 68px;
            height: 175px;
            background-size: 100% 100%;
            background-image: url('@/assets/images/anbao/hyd.png');
            text-align: center;
            &:nth-child(2n){
                margin-top: 15px;
            }
            span{
                display: block;
            }
        }
        &-index{
            color: #43CCFF;
            font-family: Helvetica Neue LT Pro-66 Medium Italic, Helvetica Neue LT Pro;
            font-size: 20px;
            font-style: italic;
            padding-top: 16px;
        }
        &-name{
            color: #46FFFF;
            font-size: 18px;
            font-weight: 500;
            margin: 10px 0 5px;
        }
        &-num{
            font-size: 32px;
            font-family: DS-Digital;
            font-weight: bold;
            color: #FFF700;
        }
    }
</style>